<template>
  <div class="min-h-screen flex items-center justify-center relative overflow-hidden">
    <!-- Rainbow Background -->
    <div class="absolute inset-0 bg-gray-900 opacity-90 z-0"></div>

    <!-- Register Card -->
    <div class="relative z-10 bg-gray-900/80 backdrop-blur-md rounded-2xl shadow-2xl p-8 w-full max-w-md mx-4 glow-effect">
      <!-- Logo -->
      <div class="flex justify-center mb-8">
        <img src="../assets/img/logo-login.png" class="h-12" alt="Flox">
      </div>

      <!-- Title -->
      <h1 class="text-3xl font-bold mb-6 text-center">
        <span class="gradient-text">用户注册</span>
      </h1>

      <!-- Register Form -->
      <form class="space-y-5">
        <!-- Username -->
        <div>
          <label for="username" class="block text-gray-300 mb-2">用户名</label>
          <div class="relative">
            <input
              id="username"
              type="text"
              v-model.lazy="register_info.userName"
              placeholder="请输入用户名"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
            >
          </div>
        </div>

        <!-- Password -->
        <div>
          <label for="password" class="block text-gray-300 mb-2">密码</label>
          <div class="relative">
            <input
              id="password"
              type="password"
              v-model.lazy="register_info.password"
              placeholder="请输入密码"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
            >
          </div>
        </div>

        <!-- Confirm Password -->
        <div>
          <label for="confirm-password" class="block text-gray-300 mb-2">确认密码</label>
          <div class="relative">
            <input
              id="confirm-password"
              type="password"
              v-model.lazy="confirm_password"
              placeholder="请再次输入密码"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
            >
          </div>
        </div>

        <!-- Gender -->
        <div>
          <label class="block text-gray-300 mb-2">性别</label>
          <div class="relative">
            <select
              v-model="register_info.gender"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300 appearance-none"
            >
              <option value="M">男</option>
              <option value="F">女</option>
            </select>
            <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
              <i class="fas fa-chevron-down"></i>
            </span>
          </div>
        </div>

        <!-- Age -->
        <div>
          <label for="age" class="block text-gray-300 mb-2">年龄</label>
          <div class="relative">
            <input
              id="age"
              type="number"
              v-model.lazy="register_info.age"
              placeholder="请输入年龄"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
            >
          </div>
        </div>

        <!-- Register Button -->
        <button
          type="button"
          @click="register"
          class="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-lg hover:from-purple-700 hover:to-pink-600 transition-all duration-300 shadow-lg transform hover:scale-105 focus:outline-none mt-6"
        >
          注册
        </button>

        <!-- Login Link -->
        <div class="text-center mt-4">
          <a
            @click="toLogin"
            class="text-purple-400 hover:text-purple-300 transition-colors duration-300 cursor-pointer"
          >
            已有账号？返回登录
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import config from '@/config'
import axios from 'axios';
import router from '..';

const register_info = reactive({
    userId: 0,
    userName: "",
    password: "",
    gender: "M",
    age: null,
})

const confirm_password = ref("")

async function register() {
    if (register_info.userName == "" || register_info.password == "") {
        alert("用户名和密码不能为空！")
        return;
    }

    if (confirm_password.value != register_info.password) {
        alert("两次输入密码不一致！")
        return;
    }

    else if(register_info.age == null){
        alert("请输入年龄！")
        return;
    }
    register_info.age=parseInt(register_info.age)
    const response = await axios.post(`${config.url}doRegister`, register_info);
    if (response.data.code == 200) {
        alert("注册成功！点击跳转到登录页……")
        router.push("/login");
    } else {
        alert(response.data.msg)
    }
}

function toLogin() {
    router.push("/login");
}
</script>

<style scoped>
.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
</style>
